<template>
  <div id="rose-total" class="rose_pass">
  </div>
</template>

<script>
  import { Rose } from '@antv/g2plot';
  export default {
    name: "RosePass",
    props:{
      roseTotal:{
        type:Array,
        default(){
          return []
        }
      },
    },
    data(){
      return{

      }
    },
    mounted() {
      const data = this.roseTotal;
      const rosePlot = new Rose('rose-total', {
        data,
        width: 300,
        height: 150,
        xField: 'angle',
        yField: 'value',
        isStack: true,
        // 当 isStack 为 true 时，该值为必填
        seriesField: 'type',
        startAngle:(Math.PI * -5) / 180,
        endAngle:(Math.PI * 360) / 180,
        radius: 0.9,
        label:false,
        legend: false,
        tooltip:{
          domStyles:{
            'g2-tooltip':{
              width:'100px',
              // height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              // width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-name':{
              width:'105px',
              textAlign:'center',
              // backgroundColor:'red',
            },
            'g2-tooltip-value':{
              marginLeft:'5px',
              width:'30px',
              textAlign:'left',
              // backgroundColor:'red',
            },
            'g2-tooltip-marker':{
              width:'15px',
              height:'8px',
              marginTop:'3px'
            }
          },
          position:'right',
          offset:40
        },
        interactions: [
          {
            type: 'element-active',
          },
        ],
      });
      rosePlot.render();
    }
  }
</script>

<style scoped>
  .rose_pass {
    margin-top: -1px;
    width: 230px;
    height: 180px;
  }
</style>